<script setup lang="ts">
let range = ref(100)
let widthP = computed(() => {
  return range.value + '%'
})
</script>

<template>
  <div class="wrap">
    <div class="form">
      grid-template-columns: minmax(auto, auto) &nbsp;&nbsp;&nbsp; 1fr &nbsp;&nbsp;&nbsp; 1fr;
    </div>

    <section>
      <div class="container">
        <div class="item">We have auto. This has different meanings depending on if it is used as the maximum or minimum value in the minmax() function.</div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
      <form action="">
        <input type="range" min="0" max="100" v-model="range" />
      </form>
    </section>
  </div>
</template>

<style scoped lang="scss">
.wrap  {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", Arial, sans-serif;
  background-color: #557;
  color: #fff;
  display: grid;
  place-content: center;
  padding: 1rem;
  gap: 2rem;

  .form {
    display: flex;
    align-items: center;
    gap: 5px;

    strong {
      font-weight: 900;
      color: #f36;
    }
  }

  section {
    width: 1000px;
    margin: 0 auto;

    display: flex;
    min-height: 200px;
    justify-content: space-between;
    /*   align-items: center; */
    flex-direction: column;

    gap: 2rem;
    box-shadow: 0 0 0 6px rgb(217 210 10 / 9%);
    border-radius: 4px;
    .container {
      --width: v-bind(widthP);
      --auto-size: auto-fit;

      display: grid;
      gap: 10px;
      grid-template-columns: minmax(min-content, min-content) 1fr 1fr;

      width: var(--width);
      padding: 10px;

      outline: 1px dashed #f36;
      counter-reset: item;

      .item {
        counter-increment: item;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 160px;
        background-color: #2c6;
        color: #000;

        &:nth-child(1) {
          background-color: #bbd7af;
          background-image: repeating-conic-gradient(
                  from 7.5deg at 50% 0,
                  transparent 0 15deg,
                  #09f336 0 30deg
          ),
          linear-gradient(177deg, #f196f312, #f4433609);
          mix-blend-mode: overlay;
          background-blend-mode: screen;
          box-shadow: inset 0px 0px 0px 3px rgb(159 86 181 / 50%);
        }
        &:before {
          content: counter(item);
          font-family: "Bungee Shade", cursive;
          font-size: 3.5rem;
        }
      }
    }

    form {
      width: 100%;

      input[type="range"] {
        width: 100%;
      }
    }
  }

}
</style>
